import "./index.scss";
import {useNavigate,useLocation} from 'react-router-dom'
import {Tabs} from "antd";

const Details2 = () => {
  //返回行政许可页面
  const navigate=useNavigate();
  const back=()=>{
      navigate('/home/examination')
  }
  //取数据
  const state = useLocation()
  console.log('state',state.state)
  //时间转换
  const toDub = (n:any) => (n < 10 ? "0" + n : "" + n);
  //年月日时分秒
  const toTime = (date:any) => {
    const oTime = new Date(date);
    return (
      oTime.getFullYear() +
      "-" +
      toDub(oTime.getMonth() + 1) +
      "-" +
      toDub(oTime.getDate()) +
      " " +
      toDub(oTime.getHours()) +
      ":" +
      toDub(oTime.getMinutes()) +
      ":" +
      toDub(oTime.getSeconds())
    );
  };

  //标签页
  const onChange = (key: string) => {
    console.log(key);
  };
  const tabItem=[
    {
      label: '基本信息',
      key: '1',
      children: <>
        <div className="context-box">
          <div className="context">
            <div className="tr">
                <div className="td">许可证编码</div>
                <div>{state.state.onum}</div>
            </div>
            <div className="tr">
                <div className="td">办学地址</div>
                <div>{state.state.oaddress}</div>
            </div>
            <div className="tr">
                <div className="td">办学性质</div>
                <div>营利性培训机构</div>
            </div>
            <div className="tr">
                <div className="td">培养目标</div>
                <div>{state.state.ogoal}</div>
            </div>
            <div className="tr">
                <div className="td">办学层次</div>
                <div>培训机构</div>
            </div>
            <div className="tr">
                <div className="td">办学形式与类型</div>
                <div>函授</div>
            </div>
            <div className="tr">
                <div className="td">招生范围及对象</div>
                <div>{state.state.orange}</div>
            </div>
          </div>
        </div>

      
      </>,
    },
    {
      label: '培训课程',
      key: '2',
      children: <>
        <div className="context-box">
          <div className="context">
            <div className="tr">
                <div className="td">培训课程</div>
                <div>{state.state.ocourse}</div>
            </div>
            <div className="tr">
                <div className="td">培训形式</div>
                <div>{state.state.oform}</div>
            </div>
            <div className="tr">
                <div className="td">教学费</div>
                <div>2000元</div>
            </div>
            <div className="tr">
                <div className="td">教材费</div>
                <div>100元</div>
            </div>
            <div className="tr">
                <div className="td">总课时</div>
                <div>64</div>
            </div>
          </div>
        </div>
      </>,
    }
  ]

  return (
    <div className="details2">
      <div className="top">
        <div className="top-l">
          <p className="title" onClick={back}>行政许可审批</p>
          <div>&gt;</div>
          <p className="detail">培训机构详情</p>
        </div>
      </div>

      <div className="hr"></div>

      <div className="chooseThrough">
        <div className="chooseLeft">
          <div className="bigName" >
            <p>{state.state.oname}</p>
            <span style={{width:'100px'}}>{state.state.ostate}</span>
          </div>
          <p>备案类型：{state.state.otype}</p>
          <p>提交时间：{toTime(state.state.otime)}</p>
        </div>
      </div>

      {/* 标签页 */}
      <Tabs
          defaultActiveKey="1"
          onChange={onChange}
          items={tabItem}
          className='tab'
        />
    </div>
  );
};
export default Details2;